<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>vue组件和时间</title>
  <script src="lib/vue.js"></script>
  <script src="lib/vue-router.js"></script>
</head>

<body>
  <div id="app">
	<h4> 
	  主要学习vue的事件修饰
      prevent：阻止默认事件发生（常用）
	  stop 阻止事件冒泡
	  once 事件只触发一次
	  capture 使用事件的捕获模式在进行触发上级元素事件
	  self 只有event.target 是当前操作的元素才触发事件
	  passive 事件的默认行为立即执行，无需等待事件回调执行完成
	</h4>
	<h3>欢迎学习</h3>
	<a href="www.baidu.com" v-on:click.prevent="showInfo">点击我展示信息</a>
	<h3 >点击测试:{{name}}</h3>
	<input type="button" v-on:click="nameAdd" value="点击按钮"/>
	<h3 >点击测试2:{{name2}}</h3>
	<input type="button" v-on:click="nameAdd2(3)" value="点击按钮"/>
	
    <!-- 创建文本框进行名字拼接 -->
    <h3> 名字拼接方式一</h3>
    <input type="text" v-model="xing" @keyup="allname" />+
    <input type="text" v-model="ming" @keyup="allname" />=
    <input type="text" v-model="all" />
    <h3> 名字拼接方式二</h3>
    <input type="text" v-model="xing1" />+
    <input type="text" v-model="ming1" />=
    <input type="text" v-model="all1" />
    <br />
    <router-link to="/login" tag="span">登录</router-link>
    <router-link to="/zhuce">注册</router-link>
    <router-view></router-view>
	<h2>键盘监控</h2>
	<!-- 常用的按键别名
	 1.Vue中常用的按键别名：
	 回车 => enter
	 删除 => delete  （插获“删除”和“退格”键）
	 退出 => esc
	 空格 => space
	 换行 => tab
	 上 => up
	 下 =》down
	 左 => left
	 右 => right
	 -->
  </div>
  <script>

    var login = {
      template: '<h1>登录页面</h1>',

    }
    var zhuce = {
      template: '<h1>注册页面</h1>'
    }
    var vr = new VueRouter({
      routes: [{
        path: '/login',
        component: login
      },
      {
        path: '/zhuce',
        component: zhuce
      }
      ]

    })
    // @keyup 文本框变更事件
    var vm = new Vue({
      el: '#app',
      data: {
        msg: "ceshi",
        xing: '',
        ming: '',
        all: '',
        xing1: '',
        ming1: '',
        all1: '',
		name:'',
		name2:''

      },
      methods: {
        allname() {
          this.all = this.xing + "-" + this.ming
        },
		nameAdd(){
			this.name = '这是点击事件'
		},
		nameAdd2(ek){
			console.log(ek)
			this.name2 = '这是点击事件'+ek
		}
      },
      watch: {
        // watch 对接绑定在数据进行数据的监控
        // watch 的优势坚持路由数据的变化
        // newVal,oldVal 老的参数和新的参数
        'xing1': function (newVal, oldVal) {
          this.all1 = newVal + "-" + this.ming1

        },
        'ming1': function (newVal, oldVal) {
          this.all1 = this.xing1 + "-" + newVal
        }, //监听不同的方式
        '$route.path': function (newVal, oldVal) {
          console.log(newVal)
          console.log("ceshi")
        }
      },
      router: vr
    });


    Vue.config.devtools = true
  </script>
</body>

</html>